<template>
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll custom-class="endSessionDialog" :class="dialogSize(info.endSessionLength)" top="10%" :title="$t('webchat.endSessionTitle')" :visible.sync="info.dialogTableVisible">
      <el-row>
        <el-col class="diction-subject" :span="24/info.endSessionLength">
          <div class="channel_dic_list">
            <div v-for="(department, index) in info.endOptionsUl" :class="{active: info.isActiveOne === index}" class="dic_item_desc_session" @click="changeMajorOne(department.name,'one', index)">
              <span class="dic_item_desc_arrow" v-if="department.options.length">&gt;</span>
              <div class="dic_item_desc_text ellipsis">{{department.name}}</div>
            </div>
          </div>
        </el-col>
        <el-col class="diction-subject" :span="24/info.endSessionLength" v-if="info.endSessionLength > 1">
          <div class="channel_dic_list" v-if="info.majorstwo.length">
            <div v-for="(major, index) in info.majorstwo" :class="{active: info.isActiveTwo === index}" class="dic_item_desc_session" @click="changeMajorOne(major.name,'two', index)">
              <span class="dic_item_desc_arrow" v-if="major.options.length">&gt;</span>
              <div class="dic_item_desc_text ellipsis">{{major.name}}</div>
            </div>
          </div>
        </el-col>
        <el-col class="diction-subject" :span="24/info.endSessionLength" v-if="info.endSessionLength > 2">
          <div class="channel_dic_list" v-if="info.majorsthree.length">
            <div  v-for="(majorthre, index) in info.majorsthree" :class="{active: info.isActiveThree === index}" class="dic_item_desc_session" @click="changeMajorOne(majorthre.name, 'three', index)">
              <div class="dic_item_desc_text ellipsis">{{majorthre.name}}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <textarea v-if="deleteFlag" class="remark" type="textarea" :placeholder="this.$t('public.remark')" v-model="info.remark" rows="3"></textarea>
      <textarea v-if="info.isWebChat" class="remark" type="textarea" :placeholder="this.$t('public.remark')" v-model="info.remark" rows="3"></textarea>
      <div class="tableVisibleBtnBox clearfix">
        <el-button class="tableVisibleBtn primary_btn" @click="endSessionChat()" size="small">{{$t('public.cancel')}}</el-button>
        <el-button type="primary" class="primary_btn tableVisibleBtn" @click="endSessionChat(true, false, info.remark)" size="small">{{$t('public.save')}}</el-button>
      </div>
    </el-dialog>
</template>
<script type="text/javascript">
  /**
   * EndSessionBox  结束会话弹框
   * @author yangjiao
   * @path @/components/public-modules/ImEndSessionBox/EndSessionBox'
   * @property
   * info j结束会话类型
   * deleteFlag true为快捷关闭设置为无时调用的
   */
  export default {
    name: 'EndSessionBox',
    props: {
      info: Object,
      deleteFlag: Boolean
    },
    methods: {
      changeMajorOne (data, flag, index) {
        if (flag === 'one') {
          this.info.endOptionsUl.forEach(d => {
            if (d.name === data) {
              this.info.endSessionActive = []
              if (this.info.endSessionFlag !== undefined) {
                this.info.endSessionFlag = false
              }
              this.info.majorstwo = d.options || []
              this.info.majorsthree = []
              this.info.isActiveOne = index
              this.info.isActiveTwo = ''
              this.info.isActiveThree = ''
              if (this.info.majorstwo.length && this.info.endSessionFlag !== undefined) {
                this.info.endSessionFlag = false
              } else {
                this.changeFlag(true)
              }
              this.info.endSessionActive[0] = index
            }
          })
        }
        if (flag === 'two') {
          this.info.majorstwo.forEach(d => {
            if (d.name === data) {
              if (this.info.endSessionActive.length > 2) {
                this.info.endSessionActive.splice(2, 1)
              }
              this.info.majorsthree = d.options || []
              this.info.isActiveTwo = index
              this.info.isActiveThree = ''
              if (this.info.majorsthree.length && this.info.endSessionFlag !== undefined) {
                this.info.endSessionFlag = false
              } else {
                this.changeFlag(true)
              }
              this.info.endSessionActive[1] = index
            }
          })
        }
        if (flag === 'three') {
          this.info.majorsthree.forEach(d => {
            if (d.name === data) {
              this.info.isActiveThree = index
              this.changeFlag(true)
              this.info.endSessionActive[2] = index
            }
          })
        }
      },
      endSessionChat (value, addClack, remark) {
        if (this.deleteFlag) {
          this.$emit('endSession', value, addClack, remark, true)
        } else {
          this.$emit('endSession', value, addClack, remark, false)
        }
      },
      changeFlag (value) {
        this.$emit('changeEndSiFlag', value)
      },
      dialogSize (num) {
        if (num === 1) {
          return 'end-dialog-one'
        } else if (num === 2) {
          return 'end-dialog-two'
        } else if (num === 3) {
          return 'end-dialog-three'
        }
      }
    },
    beforeMount () {
      if (this.info.endOptionsUl && this.info.endOptionsUl.length) {
        this.changeMajorOne(this.info.endOptionsUl[0].name, 'one', 0)
        if (this.info.endSessionLength > 1 && this.info.endSessionLength <= 2 && this.info.majorstwo[0]) {
          this.changeMajorOne(this.info.majorstwo[0].name, 'two', 0)
        } else if (this.info.endSessionLength > 2 && this.info.majorstwo[0]) {
          this.changeMajorOne(this.info.majorstwo[0].name, 'two', 0)
          if (this.info.majorsthree[0]) {
            this.changeMajorOne(this.info.majorsthree[0].name, 'three', 0)
          }
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .diction-subject
    border 1px solid $c-border1
    height 148px
    overflow-y auto
    background $cf-white
  .dic_item_desc_session
    margin-top 8px
    text-align left
    cursor pointer
    height 20px
    line-height 20px
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    position relative
    color $cf-gray0
  .dic_item_desc_arrow
    position absolute
    right 10px
  .dic_item_desc_text
    width 100%
    height 100%
    padding 0 18px
    box-sizing border-box
  .tableVisibleBtnBox
    clear both
    text-align center
    padding-top 10px
  .tableVisibleBtn
    display inline-block
  .active
    background $c-card
  .remark
    margin-top 20px
  textarea
    border 1px solid $c-border1
    border-radius 4px
    resize none
    padding 6px
    width 100%
    box-sizing border-box
  textarea:focus
    border-color $c-main
</style>
